<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<view class="top-info">
			<view class="info">
				<view class="left" @click="handleInfo">
					<view class="left-img" style="display: flex;justify-content: center;align-items: center;">
						<view class="head-img">
							<image mode="aspectFill" style="width: 108rpx;height: 108rpx;" :src="user.avatar">
							</image>
						</view>
						<view class="name-phone">
							<view class="name"> {{user.nickname || ''}} </view>
							<view class="phone" style="margin-top: 24rpx;"> {{user.mobile_hidden || ''}} </view>
						</view>
						<view class="vip-recharge" v-if="!user.is_vip"
							@click.stop="$Router.push({ path: '/pages/index/membeRecharge' })">
							会员充值/续费
						</view>
					</view>
					<view class="vip-user-detail" v-if="user.is_vip"
						@click.stop="$Router.push({ path: '/pages/index/membeRecharge' })">
						<view class="t-vip-box">
							<view class="vip-card-type">{{ user.is_vip == 1 ? '月卡' : user.is_vip == 2 ? '季卡' : '月卡' }}
							</view>
							<view class="renewal-vip-btn">续费</view>
						</view>
						<view class="vip-end-time">{{ $tools.getdateNoTime(user.vip_time * 1000) }}到期</view>
					</view>
				</view>
				<!-- <u-icon name="arrow-right" color="#fff" size="28"></u-icon> -->
				<!-- <view class="right" @click="xiaoxi">
					<view class="point" v-if="user.is_read"></view>
					<image style="width: 48rpx;height: 48rpx;" src="https://d-duomi.bigchun.com/images/xiaoxi.png"></image>
				</view> -->
			</view>
			<!-- <view class="coupons">
				<view class="coupons1" @click="handleToGwj">
					<view class="num">{{user.gouwu_money}}</view>
					<view class="text">购物金</view>
				</view>
				<view class="coupons1" @click="handleToDjj">
					<view class="num">{{user.daijin_money}}</view>
					<view class="text">代金券</view>
				</view>
				<view class="coupons1" @click="handleToYhq">
					<view class="num">{{user.youhui_money}}</view>
					<view class="text">优惠券</view>
				</view>
				<view class="coupons1" @click="handleToMb">
					<view class="num">{{user.mibao}}</view>
					<view class="text">我的米包</view>
				</view>
			</view> -->

			<view class="vip-top-box" v-if="user.id">
				<view class="l-vip-detail">
					<view class="l-t-name">
						<view class="vip-img-box"><img src="https://d-duomi.bigchun.com/images/vip/dm-vip-icon.png"
								alt=""></view>
						<view class="vip-name">商帮会员</view>
					</view>
					<view class="l-b-money">
						<view class="y-money">
							余额：<text>¥ {{ user.money }}</text>
						</view>
						<view class="top-label" @click="$Router.push({ path: '/pages/user/wallet/money' })">充值</view>
					</view>
				</view>
				<view class="r-label-btn" @click="$Router.push({ path: '/pages/user/vip/vip-detail' })">会员详情</view>
			</view>
		</view>

		<view class="order">
			<view class="top">
				<view class="h2"> 惠选 </view>
				<view class="more" @click="$Router.push({ path: '/pages/order/list', query:{type:'all'} })">
					全部订单
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			<view class="order-box">
				<view class="order-box-item" @click="$Router.push({ path: '/pages/order/list', query:{type:'nopay'} })">
					<image class="order-img" src="https://d-duomi.bigchun.com/images/Group2289.png" mode="aspectFit">
					</image>
					<text>待付款</text>
					<view class="active_item" v-if="user.order_nopay">

					</view>
				</view>
				<view class="order-box-item"
					@click="$Router.push({ path: '/pages/order/list', query:{type:'nosend'} })">
					<image class="order-img" src="https://d-duomi.bigchun.com/images/Group2287.png" mode="aspectFit">
					</image>
					<text>待发货</text>
					<view class="active_item" v-if="user.order_nosend">

					</view>
				</view>
				<view class="order-box-item" @click="$Router.push({ path: '/pages/order/list', query:{type:'noget'} })">
					<image class="order-img" src="https://d-duomi.bigchun.com/images/Group2286.png" mode="aspectFit">
					</image>
					<text>待收货</text>
					<view class="active_item" v-if="user.order_noget">

					</view>
				</view>
				<view class="" @click="$Router.push({ path: '/pages/order/list', query:{type:'nocomment'} })">
					<image class="order-img" src="https://d-duomi.bigchun.com/imgs/ping.png" mode="aspectFit"></image>
					<text>待评价</text>
				</view>
				<view class="order-box-item"
					@click="$Router.push({path: '/pages/order/list', query:{type:'affte_sale'}})">
					<image class="order-img" src="https://d-duomi.bigchun.com/images/Group2288.png" mode="aspectFit">
					</image>
					<text>退款/售后</text>
					<view class="active_item" v-if="user.order_aftersale">

					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<!-- <view class="item">
        <view class="text"> 我的钱包 </view>
        <u-icon name="arrow-right" color="#C8C8C8" size="28"></u-icon>
      </view> -->
			<view class="item" @click="goPage('pages/index/mibao')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/imgs/vip/money-icon.png" mode=""></image>
				<view class="text"> 米包多多 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/order/cate/cateList')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/cate.png" mode=""></image>
				<view class="text"> 商邦订单 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/collect')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame1.png" mode=""></image>
				<view class="text"> 我的收藏 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/footprint')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame2.png" mode=""></image>
				<view class="text"> 我的足迹 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/user/address/list')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame3.png" mode=""></image>
				<view class="text"> 收货地址 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="goPage('pages/index/invoiceManage')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame4.png" mode=""></image>
				<view class="text"> 发票管理 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<!-- <view class="item" @click="goPage('pages/index/qrCode')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame5.png" mode=""></image>
				<view class="text"> 我的二维码 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view> -->
			<!-- <view class="item" @click="goPage('pages/index/consumptionDetail')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame6.png" mode=""></image>
				<view class="text"> 商邦消费明细 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view> -->
		</view>

		<view class="list">
			<!-- <view class="item" @click="goPage('pages/index/setPaymentCode')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame7.png" mode=""></image>
				<view class="text"> 支付密码设置 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view> -->
			<button class="item" open-type="contact">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame8.png" mode=""></image>
				<view class="text"> 在线客服 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</button>
			<view class="item" @click="goPage('pages/index/feedback')">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame9.png" mode=""></image>
				<view class="text"> 意见反馈 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="item" @click="toxieyi()">
				<image class="iconImg" src="https://d-duomi.bigchun.com/images/Frame10.png" mode=""></image>
				<view class="text"> 用户协议 </view>
				<u-icon class="jiantou" name="arrow-right" color="#C8C8C8" size="28"></u-icon>
			</view>
			<view class="outLogin" @tap="showModal = true"> 退出账号 </view>
		</view>

		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
			cancel-color="#666666" @confirm="confirmLogOut" content="确定退出登录？"></u-modal>
		<!-- 悬浮按钮 -->
		<shopro-float-btn v-if="is_finshed"></shopro-float-btn>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				showModal: false,
				user: {},
				is_finshed: false,

			};
		},
		onLoad() {
			this.userInfoObject()
		},
		onShow() {
			this.userInfoObject()
			if (!uni.getStorageSync('isLogin')) return uni.navigateTo({
				url: "/pages/index/login"
			})
		},
		computed: {
			...mapGetters(['initShop']),
		},
		watch: {
			'$store.state.shopro.pink_time': {
				//对数据执行操作
				deep: true,
				immediate: true,
				handler(val, old) {
					if (val > 0 && this.$store.state.shopro.is_join == 0 && this.$store.state.shopro.vip_pink_id) {
						this.is_finshed = true
					} else {
						this.is_finshed = false
					}
				}
			},
			'$store.state.shopro.is_join': {
				deep: true,
				immediate: true,
				handler(val, old) {
					if (val == 0 && this.$store.state.shopro.vip_pink_id && this.$store.state.shopro.pink_time > 0) {
						this.is_finshed = true
					} else {
						this.is_finshed = false
					}
				}
			},
			'$store.state.shopro.vip_pink_id': {
				immediate: true,
				deep: true,
				handler(val, old) {
					if (val && this.$store.state.shopro.is_join == 0 && this.$store.state.shopro.pink_time > 0) {
						this.is_finshed = true
					} else {
						this.is_finshed = false
					}
				}
			},
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 用户信息
			userInfoObject() {
				this.getUserInfo(uni.getStorageSync('token')).then(res => {

					this.user = res
					console.log('user', this.user)
				})
			},
			// 退出登录
			confirmLogOut() {
				this.logout();
				uni.redirectTo({
					url: `/pages/index/login`
				});
				this.$store.dispatch('showAuthModal', 'toLogin');
			},
			handleInfo() {
				uni.navigateTo({
					url: `/pages/index/userInfo`
				});
			},
			xiaoxi() {
				uni.navigateTo({
					url: `/pages/index/message`
				});
			},
			handleToGwj() {
				uni.navigateTo({
					url: `/pages/index/money`
				});
			},
			handleToDjj() {
				uni.navigateTo({
					url: `/pages/index/vouchers`
				});
			},
			handleToYhq() {
				uni.navigateTo({
					url: `/pages/index/youhuiquan`
				});
			},
			handleToMb() {
				uni.navigateTo({
					url: `/pages/index/mibao`
				});
			},
			goPage(path) {
				uni.navigateTo({
					url: path
				});
			},
			toxieyi() {
				uni.navigateTo({
					url: `/pages/public/richtext?id=${this.initShop.user_protocol || 0}`
				});
			},
			//跳转会员充值
			gotoMembeRecharge() {
				uni.navigateTo({
					url: '/pages/index/membeRecharges'
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}


	.personal-wrap {
		padding-bottom: 100rpx;

		.top-info {
			width: 750rpx;
			// height: 200rpx;
			// background: #fe6766;
			// background-image:url('https://d-duomi.bigchun.com/images/beijing.png');

			.info {
				display: flex;
				align-items: center;
				padding: 30rpx;
				// padding-top: 100rpx;
				justify-content: space-between;
				position: relative;
				background: url();

				.left {
					margin-top: 100rpx;
					display: flex;
					width: 100%;
					color: #fff;
					justify-content: space-between;

					.head-img {
						width: 108rpx;
						height: 108rpx;
						overflow: hidden;
						border-radius: 50%;
						display: flex;
						margin-right: 15rpx;
						display: block;
					}

					.name-phone {
						font-size: 34rpx;
					}

					.vip-recharge {
						position: absolute;
						right: 50rpx;
						bottom: 55rpx;
						padding: 6rpx 12rpx;
						background: rgba(255, 255, 255, 0.2);
						color: #fff;
						border-radius: 94rpx;
					}

					.vip-user-detail {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.t-vip-box {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;
							justify-content: flex-end;

							.vip-card-type {
								font-size: 36rpx;
								color: #FFFFFF;
								font-weight: 500;
								margin-right: 10rpx;
							}

							.renewal-vip-btn {
								padding: 4rpx 6rpx;
								background-color: #FFFFFF;
								border-radius: 8rpx;
								font-size: 26rpx;
								color: #FD5D5B;
								font-weight: bold;
							}
						}

						.vip-end-time {
							font-size: 28rpx;
							color: #FFFFFF;
							font-weight: 500;
						}
					}
				}

				.right {
					margin-top: 130rpx;
					position: relative;

					.point {
						position: absolute;
						width: 10rpx;
						height: 10rpx;
						border-radius: 5rpx;
						background: #ffd86a;
						right: 4rpx;
						top: 4rpx;
					}

					/deep/ .u-icon__icon {
						color: #fff !important;
					}
				}
			}

			.coupons {
				display: flex;
				padding: 30rpx;
				justify-content: space-between;

				>view {
					width: 180rpx;
					color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.num {
						font-size: 40rpx;
						margin-bottom: 10rpx;
						width: 100%;
						text-align: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.text {
						font-size: 24rpx;
					}
				}
			}

			.vip-top-box {
				width: 750rpx;
				height: 252rpx;
				margin: 0 auto;
				background-image: url('');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 30rpx 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: #FEEFC7 15rpx solid;

				.l-vip-detail {
					.l-t-name {
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;

						.vip-img-box {
							width: 42rpx;
							height: 42rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 10rpx;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.vip-name {
							font-size: 38rpx;
							color: #FEEFC7;
						}
					}

					.l-b-money {
						display: flex;
						align-items: center;

						.y-money {
							font-size: 38rpx;
							color: #FEEFC7;
							font-weight: 500;
							display: flex;
							align-items: center;

							text {
								margin-left: 14rpx;
							}
						}

						.top-label {
							padding: 6rpx 10rpx;
							background: #333333;
							border-radius: 8rpx;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 1;
							margin-left: 18rpx;
						}
					}
				}

				.r-label-btn {
					width: 140rpx;
					height: 48rpx;
					background: linear-gradient(180deg, #F7F2D7 0%, #F4E5B6 100%);
					border-radius: 94rpx;
					font-size: 28rpx;
					color: #525051;
					line-height: 48rpx;
					text-align: center;
					font-weight: bold;
				}
			}
		}

		.order {
			width: 100%;
			height: 252rpx;
			padding: 20rpx 30rpx;
			background-color: #fff;
			margin: auto;

			.top {
				display: flex;
				justify-content: space-between;
				padding-top: 20rpx;

				.h2 {
					color: #333;
					font-size: 32rpx;
					font-weight: 500;
				}

				.more {
					color: #999;

					/deep/ .u-icon__icon {
						color: #999 !important;
					}
				}
			}

			.order-box {
				display: flex;
				justify-content: space-around;
				margin-top: 24rpx;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.order-img {
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.list {
			background-color: #fff;
			border-radius: 20rpx;
			width: 100%;
			margin: 40rpx 0;

			.item {
				position: relative;
				height: 108rpx;
				display: flex;
				padding: 0 30rpx;
				// justify-content: space-between;
				align-items: center;
				background-color: #fff;
			}

			.text {
				font-weight: 500;
				font-size: 32rpx;
				padding-left: 10rpx;
				color: #5d5858;
			}

			.jiantou {
				position: absolute;
				right: 32rpx;
			}
		}

		.outLogin {
			width: 690rpx;
			height: 80rpx;
			background: #fff;
			margin: 40rpx auto;
			color: #fc5351;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.iconImg {
			width: 32rpx;
			height: 32rpx;
		}
	}

	button::after {
		border: initial;
	}

	.order-box-item {
		position: relative;
	}

	.active_item {
		position: absolute;
		background-color: #ec6676;
		width: 15rpx;
		right: 0;
		height: 15rpx;
		border-radius: 50%;
	}
</style>